<template>
  <div>
    <Header></Header>
    <div class="banner">
      <!-- 题目筛选区域 -->
      <div class="categories">
        <div class="h70">
          <div>口语</div>
          <ul>
            <li
              v-for="(item, index) in ky"
              :key="index"
              @click="selectType(item)"
              :class="{ selected: subjectType == item.id }"
            >
              <router-link to="">{{
                item.subjectType + item.name
              }}</router-link>
            </li>
          </ul>
        </div>
        <div class="h70">
          <div>阅读</div>
          <ul class="read">
            <li
              v-for="(item, index) in yd"
              :key="index"
              @click="selectType(item)"
              :class="{ selected: subjectType == item.id }"
            >
              <router-link to="">{{
                item.subjectType + item.name
              }}</router-link>
            </li>
          </ul>
        </div>
        <div class="h70">
          <div>写作</div>
          <ul class="write">
            <li
              v-for="(item, index) in xz"
              :key="index"
              @click="selectType(item)"
              :class="{ selected: subjectType == item.id }"
            >
              <router-link to="">{{
                item.subjectType + item.name
              }}</router-link>
            </li>
          </ul>
        </div>
        <div class="h87">
          <div>听力</div>
          <ul class="listen">
            <li
              v-for="(item, index) in tl"
              :key="index"
              @click="selectType(item)"
              :class="{ selected: subjectType == item.id }"
            >
              <router-link to="">{{
                item.subjectType + item.name
              }}</router-link>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="bgfff"></div>
    <div class="line"></div>
    <!-- 列表区域 -->
    <div class="setbg">
      <div class="h180">
        <div>
          <span class="cate-title">{{ selectedName }}</span>
          <span class="info">已练{{ lxTotal }}题，搜索到{{ total }}道题</span>
        </div>
        <div class="search-box">
          <!-- tab切换 -->
          <div class="tabs">
            <div class="grid-content bg-purple">
              <el-tabs v-model="activeName" @tab-click="handleClick">
                <el-tab-pane label="全部" name="all"></el-tab-pane>
                <el-tab-pane label="全部真题" name="zt"></el-tab-pane>
                <el-tab-pane label="本周预测" name="yc"></el-tab-pane>
                <el-tab-pane label="练习题目" name="lx"></el-tab-pane>
              </el-tabs>
            </div>
          </div>
          <div class="search-ipt">
            <el-input
              @change="searchChange"
              @keyup.enter.native="search"
              prefix-icon="el-icon-search"
              placeholder="题目搜索"
              v-model="keywords"
              clearable
              @clear="clearIpt"
            ></el-input>
          </div>
        </div>
      </div>
    </div>
    <div class="container">
      <div class="tb">
        <div class="sort">
          <span @click="sortByTh('titleNumber')"
            >题号 <i class="iconfont icon-paixu-"></i
          ></span>
          <span
            class="times"
            @mouseleave="isTimeShow = false"
            @mouseenter="isTimeShow = true"
          >
            <span ref="times">次数</span> &nbsp;&nbsp;
            <i class="iconfont icon-xiajiantou_huaban"></i>
            <div class="time_box" v-if="isTimeShow === true">
              <span @click="selectTime($event, '')">全部</span>
              <span @click="selectTime($event, 0)">0次</span>
              <span @click="selectTime($event, 1)">1次</span>
              <span @click="selectTime($event, 2)">2次</span>
              <span @click="selectTime($event, 3)">3次</span>
            </div>
          </span>
          <span
            class="collect"
            @mouseenter="isCollectShow = true"
            @mouseleave="isCollectShow = false"
          >
            收藏
            <i class="iconfont icon-xiajiantou_huaban"></i>

            <div
              class="collect_box"
              @mouseenter="isCollectShow = true"
              v-if="isCollectShow === true"
            >
              <span @click="selectCollect('')"> 全部 </span>
              <span @click="selectCollect('jj-color')">
                <i class="iconfont icon-2x1 jj-color"></i>
              </span>
              <span @click="selectCollect('lxt-color')">
                <i class="iconfont icon-2x1 lxt-color"></i>
              </span>
              <span @click="selectCollect('wrong-color')">
                <i class="iconfont icon-2x1 wrong-color"></i>
              </span>
              <span @click="selectCollect('gpzt-color')">
                <i class="iconfont icon-2x1 gpzt-color"></i>
              </span>
            </div>
          </span>
          <span
            class="state"
            @mouseenter="isStateShow = true"
            @mouseleave="isStateShow = false"
            >学习状态 <i class="iconfont icon-xiajiantou_huaban"></i>
            <div
              class="state_box"
              @mouseenter="isStateShow = true"
              @mouseleave="isStateShow = false"
              v-if="isStateShow === true"
            >
              <span @click="selectState('')">全部状态</span>
              <span @click="selectState('1')">已练习</span>
              <span @click="selectState('0')">未练习</span>
            </div>
          </span>
          <span class="tips">温馨提示：错题请标记红色标签</span>
        </div>
        <ul class="tm">
          <li
            v-for="(item, index) in list"
            :key="index"
            @click="
              goTo(
                item.id,
                item.typeCode,
                item.subjectType,
                item.labelStyle,
                index
              )
            "
          >
            <span class="title">
              <span class="num">
                {{ page > 1 ? (page - 1) * 30 + index + 1 : index + 1 }}.
              </span>
              {{ item.title }}
            </span>
            <span
              ><el-tag class="jj-bg" v-if="item.isJt == '1'">机经</el-tag>
              <el-tag class="lxt-bg" v-if="item.isJt != '1'">练习题</el-tag>
              <el-tag class="wrong-bg" v-if="item.labelStyle == 'wrong-color'"
                >错题</el-tag
              >
              <el-tag class="gpzt-bg" v-if="item.isYc == '1'">本周预测</el-tag>
              <el-tag class="lxcs-bg">练习{{ item.num }}次</el-tag>
              <el-tag class="ylx-bg">{{ item.titleNumber }}</el-tag></span
            >
            <span class="label_td"
              ><!-- 每种题型 的label不同 -->
              <!-- <i
                v-if="item.labelStyle !== '0' && cancleShow == true"
                ref="label"
                class="iconfont icon-2x1 cancle_icon"
              ></i> -->
              <i
                @mouseenter="enterLabel"
                @mouseleave="leaveLabel"
                :class="'iconfont icon-2x1 ' + item.labelStyle"
              ></i>
            </span>
          </li>
          <h2 v-if="!filterList.length">没有搜索到匹配结果</h2>
        </ul>
      </div>
      <!-- 分页器 -->
      <!-- 分页区域 -->
      <!-- size-change：是指页面显示条数改变时触发 -->
      <!-- current-change：是指页码发生改变时触发 -->
      <!-- current-page：指当前页码 -->
      <!-- page-sizes：指每页显示个数选择器的配置项 -->
      <!-- page-size：指每页显示的条数 -->
      <!-- layout：指配置分页显示样式，控制分页组件 UI 的显示 -->
      <!-- total：总条目数 -->
      <el-pagination
        large
        background
        :page-size="rows"
        layout="prev, pager, next"
        :total="total"
        :current-page="page"
        @current-change="handleCurrentChange"
      >
      </el-pagination>
    </div>
    <!-- 返回顶部 -->
    <el-backtop :bottom="100">
      <i class="iconfont icon-huidingbu"></i>
    </el-backtop>
  </div>
</template>
<script>
import Label from '../label'
// 导入底部组件
import userUtils from '@/utils/userUtil'
import api from "@/config/api";
import { sendPost } from "@/utils/http";
import Header from '../../../tabs/header'
export default {
  components: {
    // Label,
    Header
  },
  watch: {
    subjectType: {
      handler () {
        if (sessionStorage.getItem('typeId')) {
          this.subjectType = sessionStorage.getItem('typeId')
        } else {
          this.subjectType = '1'
        }
      }
    },
  },
  data () {
    return {
      isLogin: userUtils.isLogin(),
      currentOrder: 'order',
      activeName: 'all',
      subjectType: '1',
      ky: [],
      tl: [],
      yd: [],
      xz: [],
      selectedName: 'RA朗读句子',
      list: [],//题目列表
      filterList: [], // 用来做筛选的题目列表
      lxTotal: 0,//已联系题数
      total: 0,//总题数
      page: 1,
      rows: 30,
      num: [], // 练习次数
      pages: 0, //总页数
      sortType: null, // 数组对象中的哪一个属性进行排序
      order: true,  // 升序还是降序
      selectNum: null,  // 次数赛选
      selectColour: null,  // 颜色赛选
      selectFlag: null,//学习状态赛选
      isTimeShow: false, // 次数选择的显示隐藏
      isCollectShow: false, // 是否收藏的显示隐藏
      isStateShow: false, // 是否练习的显示隐藏
      typeType: '', //查询类型 yc本周预测 lx 联系  zt 真题
      keywords: '',
      isShowTip: false,
      cancleShow: false,
      id:''
    }
  },
  created () {
    this.getSubjectType()
    if (this.subjectType) {
      this.subjectType = sessionStorage.getItem('typeId')
    } else {
      this.getSubjectType()
    }

    if (sessionStorage.getItem('selectedName')) {
      this.selectedName = sessionStorage.getItem('selectedName')
    }

    if(sessionStorage.getItem('activeName')){
      sessionStorage.removeItem('activeName')
    }
  },
  watch: {
    // $route() {
    //   this.id = this.$route.query.id;
    // },
    // id () {
    //   location.reload();
    // }
  },
  methods: {
    leaveLabel () {
      // console.log('leave');
      this.cancleShow = false
    },


    enterLabel () {
      // console.log('enter');
      this.cancleShow = true
    },

    //  清空搜索框触发事件
    clearIpt () {
      this.getSubjectType()
      this.isShowTip = false
    },
    searchChange () {
      if (this.keywords.length == 0) {
        this.clearIpt()
      }
    },
    search () {
      this.getSubjectList();
    },
    // 根据收藏的颜色来筛选题目
    selectCollect (e) {
      if (e == '') {
        this.selectColour = '';
      } else {
        this.selectColour = e;
      }
      this.isCollectShow = false
      this.selectFlag = null;
      this.selectNum = null
      this.getSubjectList();
    },
    // 根据学习状态筛选题目
    selectState (e) {
      // console.log(e);
      this.isStateShow = false
      this.page = 1;
      this.selectFlag = e;
      this.selectNum = null;
      this.selectColour = null;
      this.getSubjectList();
    },
    // 选择练习次数筛选题目
    selectTime (e, num) {
      // console.log(e);

      this.isTimeShow = false
      this.page = 1;
      this.selectFlag = null;
      this.selectNum = num
      this.$refs.times.innerText = e.target.innerText
      this.selectColour = null;
      this.getSubjectList();
    },
    handleSelect (key, keyPath) {
      // console.log(key, keyPath)
    },
    // 处理筛选tab切换
    handleClick (tab, e) {
      this.typeType = tab.name;
      this.getSubjectList();
    },
    // 当前页码发生改变时触发
    handleCurrentChange (value) {
      // console.log(value)
      this.page = value
      this.getSubjectList()
    },
    //点击题目类型
    selectType (type) {
      // console.log(type);
      this.subjectType = type.id
      // typeId暂存到本地，用来在做题中选题时作为参数使用
      sessionStorage.setItem('typeId', type.id)
      this.getSubjectList()
      sessionStorage.setItem('selectedName', type.name)
      this.selectedName = type.name
    },
    //获取题目类型
    getSubjectType () {

      let that = this
      sendPost(api.getSubjectType, {}).then((res) => {
        // console.log(res);
        that.ky = res.data.ky;
        that.tl = res.data.tl;
        that.yd = res.data.yd;
        that.xz = res.data.xz;
        that.getSubjectList();

      })
    },
    //获取题目列表
    getSubjectList () {
      let that = this
      var order = 'asc';
      if (that.order == false) {
        order = 'desc';
      }
      sendPost(api.getSubjectList, {
        subjectTypeId: that.subjectType,
        page: that.page,
        rows: that.rows,
        order: order,
        sortType: that.sortType,
        selectNum: that.selectNum,
        selectColour: that.selectColour,
        selectFlag: that.selectFlag,
        typeType: that.typeType,
        keywords: that.keywords
      }).then((res) => {
        // chrome
        document.body.scrollTop = 0
        // firefox
        document.documentElement.scrollTop = 0
        // safari
        window.pageYOffset = 0
        // console.log(res)
        that.list = res.data.list
        that.filterList = res.data.list
        that.list.forEach(item => {
          this.num.push(item.num)
        });
        that.total = res.data.total
        that.lxTotal = res.data.lxTotal
      })
    },
    // 按照题号排序
    sortByTh (type) {
      this.sortType = type
      this.order = !this.order // 更改为 升序或降序
      this.list.sort(this.compare('titleNumber'))
      this.page = 1
      // this.getSubjectList();
    },
    // 排序函数
    compare (attr) {
      let that = this
      return function (a, b) {
        var val1 = a[attr].slice(1);
        var val2 = b[attr].slice(1);
        // console.log(val1,val2);
        if (that.order) {
          return val2 - val1;
        } else {
          return val1 - val2;
        }
      }
    },
    //跳转题目页面
    goTo (id, type, subjectType, labelStyle, index) {
      // sessionStorage.setItem('idx', this.page > 1 ? (this.page - 1) * 30 + index + 1 : index + 1)
      sessionStorage.setItem('idx', this.page > 1 ? (this.page - 1) * 30 + index + 1 : index + 1)
      //朗读句子
      if (type == 'RA') {
        this.$router.push('/writingRA?id=' + id + '&idx=' + (this.page > 1 ? (this.page - 1) * 30 + index + 1 : index + 1));
        // sessionStorage.setItem('index', index)
        console.log(labelStyle);
      }

      if (type == 'RS') {
        this.$router.push('/writingRS?id=' + id + '&idx=' + (this.page > 1 ? (this.page - 1) * 30 + index + 1 : index + 1));
        // sessionStorage.setItem('index', index)
      }

      if (type == 'DI') {
        this.$router.push('/writingDI?id=' + id + '&idx=' + (this.page > 1 ? (this.page - 1) * 30 + index + 1 : index + 1));
        // sessionStorage.setItem('index', index)
      }

      if (type == 'RL') {
        this.$router.push('/writingRL?id=' + id + '&idx=' + (this.page > 1 ? (this.page - 1) * 30 + index + 1 : index + 1));
        // sessionStorage.setItem('index', index)
      }

      if (type == 'ASQ') {
        this.$router.push('/writingASQ?id=' + id + '&idx=' + (this.page > 1 ? (this.page - 1) * 30 + index + 1 : index + 1));
        // sessionStorage.setItem('index', index)
      }

      if (type == 'FIBR') {
        this.$router.push('/readingRFIB?id=' + id + '&idx=' + (this.page > 1 ? (this.page - 1) * 30 + index + 1 : index + 1));
        // sessionStorage.setItem('index', index)
      }


      if (type == 'RP') {
        this.$router.push('/readingRP?id=' + id + '&idx=' + (this.page > 1 ? (this.page - 1) * 30 + index + 1 : index + 1));
        // sessionStorage.setItem('index', index)
      }


      if (type == 'FIBRW') {
        this.$router.push('/readingFIBRW?id=' + id + '&idx=' + (this.page > 1 ? (this.page - 1) * 30 + index + 1 : index + 1));
        // sessionStorage.setItem('index', index)
      }

      if (type == 'MCS' && subjectType == '3') {
        this.$router.push('/readingMCS?id=' + id + '&idx=' + (this.page > 1 ? (this.page - 1) * 30 + index + 1 : index + 1));
        // sessionStorage.setItem('index', index)
      }

      if (type == 'MCM' && subjectType == '3') {
        this.$router.push('/readingMCM?id=' + id + '&idx=' + (this.page > 1 ? (this.page - 1) * 30 + index + 1 : index + 1));
        // sessionStorage.setItem('index', index)
      }

      if (type == 'SST') {
        this.$router.push('/listeningSST?id=' + id + '&idx=' + (this.page > 1 ? (this.page - 1) * 30 + index + 1 : index + 1));
        // sessionStorage.setItem('index', index)
      }

      if (type == 'WFD') {
        this.$router.push('/listeningWFD?id=' + id + '&idx=' + (this.page > 1 ? (this.page - 1) * 30 + index + 1 : index + 1));
        // sessionStorage.setItem('index', index)
      }

      if (type == 'FIB') {
        this.$router.push('/listeningFIB?id=' + id + '&idx=' + (this.page > 1 ? (this.page - 1) * 30 + index + 1 : index + 1));
        // sessionStorage.setItem('index', index)
      }

      if (type == 'MCS' && subjectType == '2') {
        this.$router.push('/listeningMCS?id=' + id + '&idx=' + (this.page > 1 ? (this.page - 1) * 30 + index + 1 : index + 1));
        // sessionStorage.setItem('index', index)
      }

      if (type == 'MCM' && subjectType == '2') {
        this.$router.push('/listeningMCM?id=' + id + '&idx=' + (this.page > 1 ? (this.page - 1) * 30 + index + 1 : index + 1));
        // sessionStorage.setItem('index', index)
      }

      if (type == 'SMW') {
        this.$router.push('/readingSMW?id=' + id + '&idx=' + (this.page > 1 ? (this.page - 1) * 30 + index + 1 : index + 1));
        // sessionStorage.setItem('index', index)
      }

      if (type == 'HCS') {
        this.$router.push('/listeningHCS?id=' + id + '&idx=' + (this.page > 1 ? (this.page - 1) * 30 + index + 1 : index + 1));
        // sessionStorage.setItem('index', index)
      }

      if (type == 'HIW') {
        this.$router.push('/listeningHIW?id=' + id + '&idx=' + (this.page > 1 ? (this.page - 1) * 30 + index + 1 : index + 1));
        // sessionStorage.setItem('index', index)
      }

      if (type == 'SWT') {
        this.$router.push('/writingSWT?id=' + id + '&idx=' + (this.page > 1 ? (this.page - 1) * 30 + index + 1 : index + 1));
        // sessionStorage.setItem('index', index)
      }

      if (type == 'WE') {
        this.$router.push('/writingWE?id=' + id + '&idx=' + (this.page > 1 ? (this.page - 1) * 30 + index + 1 : index + 1));
        // sessionStorage.setItem('index', index)
      }
    }
  },
}
</script>

<style lang="less" scoped>
.cancle_icon {
  margin-right: 0.3125rem;
}
.bgfff {
  height: 1.875rem;
  background-color: #fff;
  width: 100%;
}
.line {
  width: 100%;
  height: 0.125rem;
  background-color: #000;
  opacity: 0.2;
}
.sort {
  height: 3.75rem;
  line-height: 3.75rem;
  overflow: hidden;
  font-size: 1rem;
  color: #666666;
  background-color: #fcfcfc;
  font-weight: normal;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  text-align: left;
  cursor: pointer;
  .iconfont {
    color: #ccc;
    font-weight: bold;
  }
  display: flex;
  span {
    width: 12.5rem;
    text-align: left;
  }
  span:hover {
    .iconfont {
      display: inline-block;
      transform: rotateX(180deg);
      transition: 0.4s linear;
      -webkit-transform: rotateX(180deg);
      -moz-transform: rotateX(180deg);
      -o-transform: rotateX(180deg);
      -ms-transform: rotateX(180deg);
      color: #000;
    }
  }
  .collect:hover,
  .state:hover,
  .times:hover {
    .iconfont {
      transform: rotateX(0);
    }
  }
  .collect_box,
  .state_box,
  .time_box {
    position: absolute;
    z-index: 999;
    width: 3rem;
    height: 7.5rem;
    display: flex;
    flex-direction: column;
    margin-left: 1rem;
    span {
      height: 1.875rem;
      width: 3rem;
      line-height: 1.875rem;
      text-align: center;
      color: #999;
      background-color: #fafafa;
    }
    span:hover {
      transform: scale(1.04);
      color: #000;
      background-color: #fff;
    }
  }
  .collect_box {
    margin-left: -1.25rem;
    span {
      width: 5rem;
      border-radius: 0 0 0.3125rem 0.3125re;
    }
  }
  .state_box {
    margin-left: -1.25rem;
    span {
      width: 7rem;
      border-radius: 0 0 0.3125re 0.3125re;
    }
  }
}
.tm {
  li {
    position: relative;
    display: flex;
    cursor: pointer;
    width: 100%;
    height: 3.75rem;
    line-height: 3.75rem;
    font-size: 1rem;
    color: #333333;
    border-bottom: 1px solid #efefef !important;
  }
  li:hover {
    background-color: #fafafa;
  }
  .title {
    width: 46.5rem;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    margin-right: 0.625rem;
  }

  .el-tag {
    height: 1.575rem;
    line-height: 1.575rem;
    margin-right: 0.9375rem;
    color: #fff;
    padding: 0 0.375rem;
    border: none;
  }
  .label_td {
    right: 0;
    position: absolute;
    width: 6.25rem;
    height: 100%;
    text-align: right;
  }
}
.tips {
  font-size: 0.875rem;
  color: #ff5e4e;
  margin-left: 10rem;
}
/deep/.el-tabs--top .el-tabs__item.is-top:nth-child(2) {
  width: 4rem;
  text-align: center;
}
/deep/.el-tabs__nav-wrap::after {
  background-color: transparent;
}
/deep/.el-tabs__active-bar {
  height: 0.25rem;
  background: #ff5e4e;
}
/deep/.el-tabs__item {
  height: 4.375rem;
  line-height: 4.375rem;
  font-size: 1rem;
  color: #333;
}
.el-menu {
  background-color: transparent;
  color: #333333;
}
.el-menu-item.is-active {
  background-color: transparent !important;
}
.el-menu-item {
  background-color: rgba(0, 0, 0, 0) !important;
  font-size: 1.125rem;
  color: #333;
}
.el-menu.el-menu--horizontal {
  border-bottom: none;
}
* {
  border-bottom-color: transparent !important;
}
.el-menu--horizontal > .el-menu-item {
  border-top: 0.125rem solid transparent;
  color: #333333;
}
.el-menu--horizontal > .el-menu-item.is-active {
  border-bottom: 0;
  border-top: 0.125rem solid rgb(255, 83, 66);
}
.el-menu--horizontal > .el-menu-item {
  border-top: 0.125rem solid transparent;
  color: #333333;
  box-sizing: border-box;
  border-bottom: 0px solid #000;
}
.el-menu--horizontal > .el-menu-item.is-active {
  border-bottom: 0;
  border-top: 0.125rem solid rgb(255, 83, 66);
  box-sizing: border-box;
}
.banner {
  background-color: #fff;
}
header {
  position: absolute;
  top: 0;
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  height: 3.75rem;
  line-height: 3.75rem;
  font-size: 1.125rem !important;
  font-weight: bold;
  background-color: #fff;
  box-shadow: 0px 0.125rem 0.625rem 0px rgba(0, 0, 0, 0.09);
  z-index: 200;
  .logo {
    flex: 0.7;
    text-align: center;
    line-height: 3.75rem;
  }
  .item {
    font-weight: bold;
    text-decoration: none;
    color: #666;
    padding: 0 1.25rem;
    display: inline-block;
    cursor: pointer;
    box-sizing: border-box;
  }
  a {
    text-decoration: none;
    box-sizing: border-box;
  }
}
.gap {
  background-color: #fff;
  height: 1.875rem;
}

.avatar {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  display: inline-block;
  vertical-align: middle;
}
.username {
  display: inline-block;
  margin-left: 0.625rem;
  font-weight: bold;
  font-size: 1rem;
  color: #333333;
  width: 6.25rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

// 题目类型筛选区域
body {
  background-color: #fff !important;
}

.categories {
  width: 75rem;
  margin: auto;
  // margin-top: 4rem;
  height: 18.5625rem;
  .h70 {
    height: 4.0625rem;
    line-height: 4.0625rem;
    display: flex;
    div {
      text-align: left;
      width: 5.0375rem;
      font-weight: bold;
      font-size: 1.25rem;
      color: #333333;
    }
    ul {
      display: flex;
    }
    li {
      font-size: 1rem;
      color: #666666;
      cursor: pointer;
      padding: 0 1.25rem;
      margin-right: 0.625rem;
      a {
        display: inline-block;
        height: 100%;
      }
    }
    .read {
      :nth-child(3) {
        padding: 0;
        width: 7.5rem;
        margin-left: 0.875rem;
        a {
          width: 100%;
        }
      }
      a {
        width: 6.75rem;
      }
      :nth-child(4) {
        padding-left: 1rem;
      }
      :nth-child(5) {
        padding-left: 1rem;
      }
    }
    .write {
      a {
        width: 6.75rem;
      }
      :nth-child(4) {
        padding-left: 0.5rem;
      }
      :nth-child(5) {
        padding-left: 0.625rem;
      }
    }
  }
  .h87 {
    height: 5.4375rem;
    line-height: 4.0625rem;
    display: flex;
    flex-wrap: wrap;
    div {
      width: 5.0375rem;
      font-weight: bold;
      text-align: left;
      font-size: 1.25rem;
      color: #333333;
    }
    ul {
      display: flex;
      flex-wrap: wrap;
      width: 69rem;
      :nth-child(2) {
        margin-left: 1.5rem;
      }
      :nth-child(3) {
        margin-left: 1.3rem;
      }
      :nth-child(4) {
        margin-left: 1.1rem;
      }
    }
    li {
      cursor: pointer;
      font-size: 1rem;
      color: #666666;
      padding: 0 1.25rem;
      height: 0;
      a {
        display: inline-block;
        width: 100%;
        height: 100%;
      }
    }
  }
  .selected {
    a {
      font-weight: bold;
      color: #ff5e4e !important;
    }
  }
}
.setbg {
  background-color: #fff;
  width: 100%;
  height: 10.25rem;
}
.h180 {
  width: 75rem;
  margin: auto;
  height: 11.25rem;
  padding: 2.5rem 0 1.875rem;
  box-sizing: border-box;
  .cate-title {
    display: inline-block;
    width: 13.9375rem;
    font-size: 2rem;
    color: #333333;
  }
  .info {
    font-size: 1rem;
    color: #999999;
    margin-left: 0.625rem;
  }
  .search-box {
    display: flex;
    justify-content: space-between;
  }
  .search {
    height: 4.75rem;
    line-height: 4.75rem;
    width: 27.5rem;
    color: #333333;
    font-size: 1rem;
    display: flex;
    .item {
      flex: 1;
      text-align: center;
      border-bottom: 0.25rem solid transparent;
      box-sizing: border-box;
      cursor: pointer;
    }
    .bdbottom {
      border-bottom-color: #ff5e4e !important;
    }
  }
  .search-ipt {
    width: 18rem;
    height: 2.5rem;
    margin-top: 0.625rem;
    /deep/.el-input__inner {
      border-radius: 1.25rem;
    }
  }
  /deep/.el-input__prefix {
    left: 0.9375rem;
  }
  /deep/.el-input--prefix .el-input__inner {
    padding-left: 2.8125rem;
  }
  /deep/.el-input__inner:focus {
    border-color: #13bfbf;
    color: #13bfbf;
    .el-input__prefix {
      color: #13bfbf;
    }
  }
  /deep/.el-input__inner::placeholder {
    color: #13bfbf;
    font-size: 1rem;
  }
}
.container {
  background-color: #fff;
  padding-bottom: 5.625rem;
}

.tb {
  width: 75rem;
  margin: auto;
}
.label_td {
  line-height: 3.75rem;
}
.gap1 {
  height: 1rem;
}
.jj-bg {
  background: #ff9b4f;
}
.jj-color {
  color: #ff9b4f !important;
}

.lxt-bg {
  background: #7cc3d6;
}
.lxt-color {
  color: #7cc3d6 !important;
}
.wrong-bg {
  background: #ff5e4e;
}
.wrong-color {
  color: #ff5e4e !important;
}
.gpzt-bg {
  background: #13bfbf;
}
.gpzt-color {
  color: #13bfbf !important;
}
.lxcs-bg {
  background: #99bbe4;
}
.lxcs-color {
  color: #99bbe4;
}
.ylx-bg {
  background: #94d0f7;
}
.ylx-color {
  color: #94d0f7;
}
td {
  position: relative;
}

/deep/.el-backtop {
  .iconfont {
    font-size: 3.75rem;
    color: #ff5e4e;
  }
}

/deep/.el-pagination button,
.el-pagination span:not([class*="suffix"]) {
  display: inline-block;
  font-size: 0.8125rem;
  min-width: 2.21875rem;
  height: 2.5rem;
  line-height: 2.5rem;
  vertical-align: top;
  box-sizing: border-box;
}
/deep/.el-pager li {
  padding: 0 0.25rem;
  font-size: 0.9375rem;
  min-width: 2.21875rem;
  height: 2.5rem !important;
  width: 2.5rem;
  line-height: 2.5rem;
  box-sizing: border-box;
  text-align: center;
}
::v-deep {
  .el-pagination.is-background .el-pager li:not(.disabled) {
    background-color: #fff; // 进行修改未选中背景和字体
    // color: #fff;
  }
  .el-pagination.is-background .el-pager li:not(.disabled).active {
    background-color: #ff5e4e; // 进行修改选中项背景和字体
    color: #fff;
  }
}
.el-pagination {
  font-size: 1.25rem;
  text-align: center;
  padding-top: 5rem;
}
</style>
